<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客正文</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_content.css">
    <link rel="stylesheet" href="editor.md/css/editormd.preview.min.css" />


</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/logo.jpg" alt="">
        <span class="title">博客系统</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer" style="width: 45%;"></span>

        <!-- 未登录显示元素 -->
        <span id="noneLoginElement">
            <a href="blog_list.html">博客广场</a>
            <a href="login.html">登录</a>
            <a href="reg.html">注册</a>
        </span>

        <!-- 已登录显示元素 -->
        <span id="userLoginElement" style="display: none;">
            <a href="blog_list.html">博客广场</a>
            <a href="personal_center.html">个人中心</a>
            <a href="myblog_list.html">个人博客</a>
            <a href="my_relation_following.html">我的关注/粉丝</a>
        <a href="private_message.html">聊天室</a>
            <a href="draft_list.html">我的草稿</a>
            <a href="blog_add.html">写博客</a>
            <a href="javascript:logout()">注销</a>
        </span>

    </div>
    <!-- 版心 -->
    <div class="container">

        <div class="container-left">
            <div class="card">
                <img id="avatar-img" src="img/avatar.png" class="avtar" alt="Avatar">
                <h3 id="author2"></h3>

                <span id="notLoginUser" class="isLogin">
                    <button class="button attention-button" user-id="0" onclick="toggleFollow(this.getAttribute('user-id'))"> 关注 </button>
                </span>

                <span id="isLoginUser" class="isLogin">
                    <button class="button my-attention-button" onclick="toFollowingPage()">我的关注</button>
                    <button class="button my-fans-button" onclick="toFollowsPage()">我的粉丝</button>
                </span>

                <a id="url" href="#" target="_blank">gitee 地址</a>
                <div class="counter">
                    <span class="icon icon-counter"></span>
                    <span id="counter">文章数量：15</span>
                </div>
                <div class="reading-times">
                    <span class="icon icon-reading"></span>
                    <span id="reading-times">总访问量：9999</span>
                </div>
                <div class="comment-times">
                    <span class="icon icon-comment"></span>
                    <span id="comment-times">获得评论：2 次</span>
                </div>

            </div>
        </div>

        <!-- 右侧内容详情 -->
        <div class="container-right">
            <div class="blog-content">
                <!-- 博客标题 -->
                <h3 id="title"></h3>
                <!-- 博客时间 -->
                <div class="message">
                    作者：
                    <span id="author"></span> &nbsp;&nbsp;&nbsp;
                    阅读量：
                    <span id="rcount"></span> &nbsp;&nbsp;&nbsp;
                    发布时间：
                    <span id="createtime"></span> &nbsp;&nbsp;&nbsp;
                </div>
                <!-- 博客正文 -->
                <div id="editorDiv" class="art-content">
                    <!-- 这里放置你的内容 -->
                </div>
                <div id="expandButton" class="expand-btn">展开更多</div>


                &nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;

                <!-- 评论区 -->
                <div class="comments">
                    <h4>评论区</h4>
                    <div class="comment-list" id="commentList">

                        <!-- 这里将通过 JavaScript 动态加载评论内容 -->

                        <!-- <div class="comment">
                            <div class="comment-header">
                                <img class="avatar" id="avatar-comment" src="./img/avatar.png">
                                <h3 id="username">张三：</h3>
                                <span id="commenttime">2023-08-19 11:40:04</span>
                            </div>
                            <div class="comment-content">
                                <p id="content">这是一条评论的内容。</p>
                            </div>
                            <div class="delete">
                                <button class="delete-comment" data-comment-id="comment_id"
                                    onclick="delComment(this.getAttribute('data-comment-id'))">删除评论</button>
                            </div>
                        </div> -->



                    </div>
                    <!-- 发表评论 -->

                    <span id="userLoginElement2">
                        <!-- 已登录用户显示 -->
                        <div class="comment-input">
                            <textarea class="input" placeholder="留下你的精彩评论吧！" id="inputText"></textarea>
                            <!-- 发送按钮 -->
                            <div class="ctrl">
                                <button onclick="subComment()">发表评论</button>
                            </div>
                        </div>
                    </span>

                    <!-- 未登录用户显示 -->
                    <span id="noneLoginElement2">
                        <div class="comment-input">
                            <h2>请先登录，再评论！</h1>
                        </div>
                    </span>

                </div>

            </div>
        </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <script src="editor.md/editormd.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="./js/urltools.js"></script>
    <script src="./js/logout.js"></script>
    <script src="./js/islogin.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/blog_content.js"></script>

    <script>
        function toFollowingPage() {
            location.href = "my_relation_following.html";
        }

        function toFollowsPage() {
            location.href = "my_relation_follows.html";
        }
    </script>
</body>

</html>